@extends('home/main/layout')
@section('title','商品详情')
@section('introduce')
<meta name="_token" content="{{csrf_token()}}">
@stop
@section('content')
<!--bottom-header-->
<!--start-breadcrumbs-->
<div class="breadcrumbs">
	<div class="container">
		<div class="breadcrumbs-main">
			<ol class="breadcrumb">
				<li><a href="{{asset('/')}}">首页</a></li>
				<li class="active">商品详情</li>
			</ol>
		</div>
	</div>
</div>
<!--end-breadcrumbs-->
<!--start-single-->
<div class="single contact">
	<div class="container">
		<div class="single-main">
			<div class="col-md-9 single-main-left">
				<div class="sngl-top">
					<div class="col-md-5 single-top-left">	
						<div class="flexslider">
							<ul class="slides">
								<li id="lipic1" data-thumb="">
									<img id="imgpic1" src="" />
								</li>
								<li id="lipic2" data-thumb="">
									<img id="imgpic2" src="" />
								</li>
								<li id="lipic3" data-thumb="">
									<img id="imgpic3" src="" />
								</li>
								<li id="lipic4" data-thumb="">
									<img id="imgpic4" src="" />
								</li>
							</ul>
						</div>
<!-- FlexSlider -->
<script defer src="{{asset('home/js/jquery.flexslider.js')}}"></script>
<link rel="stylesheet" href="{{asset('home/css/flexslider.css')}}" type="text/css" media="screen" />

<script>
// Can also be used with $(document).ready()
$(window).load(function() {
	$('.flexslider').flexslider({
		animation: "slide",
		controlNav: "thumbnails"
	});
});
</script>
					</div>	
					<div class="col-md-7 single-top-right">
						<div class="details-left-info simpleCart_shelfItem">
							<h3>{{$product->title}}</h3>
							<p class="availability">关键字： <span class="color">{{$product->keyword}}</span></p>
							<div class="price_single">
								<span class="reducedfrom">￥{{$product->mprice}}</span>
								<span class="actual item_price">￥{{$product->sprice}}</span><a href="/comment/{{$product->product_id}}">查看评论</a>
							</div>

							<h2 class="quick">描述:</h2>
							<p class="quick_desc">{{$product->description}}</p>
							<ul class="product-colors">
								<h3>色系：</h3>
								@foreach($pro_colors as $k=>$pro_color)
								<li><a class="color1"><span  class="col" colk="{{$k}}" colid="{{$pro_color->color_id}}" sufpic="{{$pro_color->suf_pic}}" style="background:{{$pro_color->color_hex_code}}"> </span></a></li>
								@endforeach
								<div class="clear"> </div>
							</ul>
							<h3>尺码：</h3>
							<ul class="size" id="sizeul">
								@foreach($sizes_arr as $s)
									{!!$s!!}
								@endforeach
								<li style="clear:both;"></li>
								<script>
								$(function(){
									$.ajaxSetup({
						          		headers:{
						                'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
							            }
							        });
									$('.col').first().css('border','1px solid black');
									$('.col').on('mouseover',function(){
										$(this).css('cursor','pointer');
									});
									//初始size
									var fcolid=$('.col').first().attr('colid');
									$('.siz[colid!='+fcolid+']').css('display','none');
									$('.siz[colid='+fcolid+']').css('display','inline');
									//初始pic
									var fsufpic=$('.col').first().attr('sufpic');
									//console.log(fsufpic);
									$('#lipic1').attr('data-thumb','/uploads/product/carouse_pic/'+fsufpic+'_1.jpg');
									$('#imgpic1').attr('src','/uploads/product/carouse_pic/'+fsufpic+'_1.jpg');
									$('#lipic2').attr('data-thumb','/uploads/product/carouse_pic/'+fsufpic+'_2.jpg');
									$('#imgpic2').attr('src','/uploads/product/carouse_pic/'+fsufpic+'_2.jpg');
									$('#lipic3').attr('data-thumb','/uploads/product/carouse_pic/'+fsufpic+'_3.jpg');
									$('#imgpic3').attr('src','/uploads/product/carouse_pic/'+fsufpic+'_3.jpg');
									$('#lipic4').attr('data-thumb','/uploads/product/carouse_pic/'+fsufpic+'_4.jpg');
									$('#imgpic4').attr('src','/uploads/product/carouse_pic/'+fsufpic+'_4.jpg');
									//evt
									$('.col').on('click',function(){
										//console.log('ok');
										$('.col').css('border','');
										$(this).css('border','1px solid black');
										
										//尺码
										var colid=$(this).attr('colid');
										//console.log(colid);
										
										$('.siz[colid!='+colid+']').css('display','none');
										$('.siz[colid='+colid+']').css('display','inline');
										//图片
										var sufpic=$(this).attr('sufpic');
										//console.log(sufpic);
										
										$('#lipic1').attr('data-thumb','/uploads/product/carouse_pic/'+sufpic+'_1.jpg');
										$('#imgpic1').attr('src','/uploads/product/carouse_pic/'+sufpic+'_1.jpg');
										$('#lipic2').attr('data-thumb','/uploads/product/carouse_pic/'+sufpic+'_2.jpg');
										$('#imgpic2').attr('src','/uploads/product/carouse_pic/'+sufpic+'_2.jpg');
										$('#lipic3').attr('data-thumb','/uploads/product/carouse_pic/'+sufpic+'_3.jpg');
										$('#imgpic3').attr('src','/uploads/product/carouse_pic/'+sufpic+'_3.jpg');
										$('#lipic4').attr('data-thumb','/uploads/product/carouse_pic/'+sufpic+'_4.jpg');
										$('#imgpic4').attr('src','/uploads/product/carouse_pic/'+sufpic+'_4.jpg');
										$('#lipic1_clone').attr('data-thumb','/uploads/product/carouse_pic/'+sufpic+'_1.jpg');
										$('#imgpic1_clone').attr('src','/uploads/product/carouse_pic/'+sufpic+'_1.jpg');
										$('#lipic2_clone').attr('data-thumb','/uploads/product/carouse_pic/'+sufpic+'_2.jpg');
										$('#imgpic2_clone').attr('src','/uploads/product/carouse_pic/'+sufpic+'_2.jpg');
										$('#lipic3_clone').attr('data-thumb','/uploads/product/carouse_pic/'+sufpic+'_3.jpg');
										$('#imgpic3_clone').attr('src','/uploads/product/carouse_pic/'+sufpic+'_3.jpg');
										$('#lipic4_clone').attr('data-thumb','/uploads/product/carouse_pic/'+sufpic+'_4.jpg');
										$('#imgpic4_clone').attr('src','/uploads/product/carouse_pic/'+sufpic+'_4.jpg');
										$('.flex-control-nav li img').eq(0).attr('src','/uploads/product/carouse_pic/'+sufpic+'_1.jpg');
										$('.flex-control-nav li img').eq(1).attr('src','/uploads/product/carouse_pic/'+sufpic+'_2.jpg');
										$('.flex-control-nav li img').eq(2).attr('src','/uploads/product/carouse_pic/'+sufpic+'_3.jpg');
										$('.flex-control-nav li img').eq(3).attr('src','/uploads/product/carouse_pic/'+sufpic+'_4.jpg');
									});
									//按siz
									$('.siz').on('mouseover',function(){
										$(this).css('cursor','pointer');
									});
									

									$('.siz').on('click',function(){
										//$('.siz').css('backgroundColor','#f0f0f0');
										$('.siz').css('backgroundColor','');
										$(this).css('backgroundColor','aqua');
										$('.siz').removeAttr('choose');
										$(this).attr('choose','1');
									});

								});		
								</script>
								
								
								
							</ul>
							<div class="quantity_box">
								<ul class="product-qty">
									<span>购买数量:</span>
									<select id="buynumsel">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
									</select>
								</ul>
							</div>
							<div class="clearfix"> </div>
							<div class="single-but item_add">
								<input type="submit" isadd="0" id="addcart" value="加入购物车"/>
							</div>
							<div class="single-but item_add">
								<input proid="{{$product->product_id}}" type="submit" isadd="0" id="collect" value="收藏该商品"/>
							</div>
							<script>
								$('#addcart').on('click',function(){

									var c=$('.siz[choose]');
									if(c.length==1){
										
										var keyword=$('.siz[choose]').attr('keyword');
										var sufprocode=$('.siz[choose]').attr('sufprocode');
										var cosirid=$('.siz[choose]').attr('cosirid');
										var proid=$('.siz[choose]').attr('proid');
										
										var buynum=$('#buynumsel').val();
										//console.log(proid+'---'+keyword+'---'+cosirid+'---'+sufprocode+'---num:'+buynum);


										//ajax
										$.ajax({
											type:'get',
											url:"{{url('/cartadd')}}",
											data:{'proid':proid,'cosirid':cosirid,'buynum':buynum,'sufprocode':sufprocode,'keyword':keyword},
											success:function(data){
												//console.log(data);
												if(typeof(data)=='number'){
													alert('已加入购物车');
												}else{
													alert(data);
												}
												
											},datatype:'json'
										});


										$('.siz').removeAttr('choose');
											
									}else{
										alert('选个尺码');
									}
									
								});

								$('#collect').on('click',function(){
									var proid = $(this).attr('proid');
									// console.log(proid);
									$.ajax({
										url:"{{url('/collect/add')}}",
										data:{'proid':proid},
										type:'get',
										success:function(data)
										{
											console.log(data);
											if(data)
											{
												alert('收藏商品成功');
											}else
											{
												alert('已收藏该商品');
											}
										},datatype:'json'
									});
								});
							</script>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="latest products">
					<h3>相似商品推荐</h3>
					
					@for($si=0;$si<=count($same_products)-1;$si++)
					@if($si%3==0)
					<div class="product-one">
					@endif
					
						<div class="col-md-4 product-left single-left"> 
						<div class="p-one simpleCart_shelfItem" style="width:240px;">
							<a href="/chicknum/{{$same_products[$si]->product_id}}">
									<img  style="width:213px;" src="/uploads/product/logo_pic/{{$same_products[$si]->logo_pic}}" alt="" />
									<div class="mask mask1">
										<span>快去看看</span>
									</div>
								</a>
							<h4>{{$same_products[$si]->title}}</h4>
							<p><a href="/chicknum/{{$same_products[$si]->product_id}}"> <span class=" item_price">￥{{$same_products[$si]->sprice}}</span></a></p>
						</div>
						</div>
					@if($si%3==2||($si>=3&&$si<5)||($si>=0&&$si<2))
						<div class="clearfix"></div>
					</div>
					@endif
					@endfor	
					<!--
					<div class="product-one">
						<div class="col-md-4 product-left single-left"> 
						<div class="p-one simpleCart_shelfItem">
							<a href="/single/1">
									<img src="/uploads/product/carouse_pic/b-1.jpg" alt="" />
									<div class="mask mask1">
										<span>快去看看</span>
									</div>
								</a>
							<h4>商品标题</h4>
							<p><a href="#"><span class="item_price">￥329</span></a></p>
						</div>
						</div>		
							
						<div class="clearfix"> </div>
					</div>
					-->
				</div>
			</div>
			<div class="col-md-3 p-right single-right">
				<h3>人群</h3>
					<ul class="product-categories">
						@foreach($crowds as $crowd)
						<li><a href="/product?cro_id={{$crowd->crowd_id}}">{{$crowd->crowd_type}}</a> <span class="count">*</span></li>
						@endforeach
					</ul>
				<h3>运动</h3>
					<ul class="product-categories">
						@foreach($sports as $sport)
						<li><a href="/product?spo_id={{$sport->sport_id}}">{{$sport->sport_type}}</a> <span class="count">*</span></li>
						@endforeach
					</ul>
				<h3>品牌</h3>
					<ul class="product-categories">
						@foreach($allbrands as $allbrand)
						<li><a href="/product?brand_id={{$allbrand->brand_id}}">{{$allbrand->brand_name_zh}}</a> <span class="count">*</span></li>
						@endforeach
					</ul>
			
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--end-single-->
@stop
